<?php
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     base_default
 * @copyright   Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */

/**
 * Product media data template
 *
 * @see Mage_Catalog_Block_Product_View_Media
 */
?>
<?php
    $_product = $this->getProduct();
    $_helper = $this->helper('catalog/output');
    $viewmode = Mage::helper('themeframework/settings')->getProductDetail_Viewmode();
?>
<?php if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>

<div class="media-left">
	<?php if ($viewmode == 'cloudzoom'): ?>
	   <?php
			$_img = $this->helper('catalog/image')->init($_product, 'image');    
                  
			if($_img->getOriginalWidth() >= 500){
			     $w	=	500; 
			}				
			else
				$w  =	$_img->getOriginalWidth();
			$ratio = $w / $_img->getOriginalWidth();
			$h = $ratio * $_img->getOriginalHeight();
		?>
        <div class="product-image">
            <div id="qs-magnify" class="magnify">        
            	<!-- This is the magnifying glass which will contain the original/large version -->
            	<div id="qs-magnify-large" class="large" style="background: url('<?php echo $_img; ?>') no-repeat;"></div>
            	
            	<!-- This is the small image -->
                <a href="<?php echo $_img ?>">        	   
                   <img id="qs-magnify-small" width="<?php echo $w ?>" class="small em-product-main-img" <?php if(Mage::helper('themeframework/settings')->getSnippets_Enable()): ?>itemprop="image"<?php endif;?> src="<?php echo $_img; ?>" alt='' title="<?php echo $this->escapeHtml($this->getImageLabel());?>" />
                </a>
            	
            </div>            
        </div>
        
        <script type="text/javascript">
            (function($) {
                $(window).bind('qs_load',function(){
                	var native_width = 0;
                	var native_height = 0;
                    var magnify = $("#qs-magnify");
                    var magnify_small = $("#qs-magnify-small");
                    var magnify_large = $('#qs-magnify-large');
                
                	//Now the mousemove function
                	magnify.mousemove(function(e){
                		//When the user hovers on the image, the script will first calculate
                		//the native dimensions if they don't exist. Only after the native dimensions
                		//are available, the script will show the zoomed version.
                		if(!native_width && !native_height)
                		{
                			//This will create a new image object with the same image as that in .small
                			//We cannot directly get the dimensions from .small because of the 
                			//width specified to 200px in the html. To get the actual dimensions we have
                			//created this image object.
                			var image_object = new Image();
                			image_object.src = magnify_small.attr("src");
                			
                			//This code is wrapped in the .load function which is important.
                			//width and height of the object would return 0 if accessed before 
                			//the image gets loaded.
                			native_width = image_object.width;
                			native_height = image_object.height;
                		}
                		else
                		{
                			//x/y coordinates of the mouse
                			//This is the position of .magnify with respect to the document.
                			var magnify_offset = $(this).offset();
                			//We will deduct the positions of .magnify from the mouse positions with
                			//respect to the document to get the mouse positions with respect to the 
                			//container(.magnify)
                			var mx = e.pageX - magnify_offset.left;
                			var my = e.pageY - magnify_offset.top;
                			
                			//Finally the code to fade out the glass if the mouse is outside the container
                			if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0)
                			{
                				magnify_large.fadeIn(100);
                			}
                			else
                			{
                				magnify_large.fadeOut(100);
                			}
                			if(magnify_large.is(":visible"))
                			{
                				//The background position of .large will be changed according to the position
                				//of the mouse over the .small image. So we will get the ratio of the pixel
                				//under the mouse pointer with respect to the image and use that to position the 
                				//large image inside the magnifying glass
                				var rx = Math.round(mx/magnify_small.width()*native_width - magnify_large.width()/2)*-1;
                				var ry = Math.round(my/magnify_small.height()*native_height - magnify_large.height()/2)*-1;
                				var bgp = rx + "px " + ry + "px";
                				
                				//Time to move the magnifying glass with the mouse
                				var px = mx - magnify_large.width()/2;
                				var py = my - magnify_large.height()/2;
                				//Now the glass moves with the mouse
                				//The logic is to deduct half of the glass's width and height from the 
                				//mouse coordinates to place it with its center at the mouse coordinates
                				
                				//If you hover on the image now, you should see the magnifying glass in action
                				magnify_large.css({left: px, top: py, backgroundPosition: bgp});
                			}
                		}
                	});
                    magnify.mouseleave(function(e){
                        magnify_large.fadeOut(100);
                    });
                });
            })(jQuery);        
        </script>

	<?php else: ?>
    	<p class="product-image zoom-default product-image-zoom" style="width:500px;height:500px;">
           <?php
                $w = 500;
                $h = 500;
                $_img = '<img style="max-width:none;" id="image2" src="'.$this->helper('catalog/image')->init($_product, 'image').'" alt="'.$this->escapeHtml($this->getImageLabel()).'" title="'.$this->escapeHtml($this->getImageLabel()).'" />';
                echo $_helper->productAttribute($_product, $_img, 'image');
            ?>
        </p>
    	<p class="zoom-notice" id="track_hint2"><?php echo $this->__('Double click on above image to view full picture') ?></p>
        <div class="zoom"  style="width:500px;max-width:100%;">
            <img id="zoom_out2" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_out.gif') ?>" alt="<?php echo $this->__('Zoom Out') ?>" title="<?php echo $this->__('Zoom Out') ?>" class="btn-zoom-out" />
            <div id="track2">
                <div id="handle2"></div>
            </div>
            <img id="zoom_in2" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_in.gif') ?>" alt="<?php echo $this->__('Zoom In') ?>" title="<?php echo $this->__('Zoom In') ?>" class="btn-zoom-in" />
        </div>
    	<script type="text/javascript">
    	//<![CDATA[
        
            jQuery(window).bind('qs_load', function() {     
                setTimeout(function(){
                    product_zoom2 = new Product.Zoom('image2', 'track2', 'handle2', 'zoom_in2', 'zoom_out2', 'track_hint2');
                },3000);       
                
            });
        
    	//]]>
    	</script>
	<?php endif; ?>
</div>	
<?php else: ?>
<div class="media-left">
    <p class="product-image default_image_magento">
        <?php
            $_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(500,500).'" alt="'.$this->escapeHtml($this->getImageLabel()).'" title="'.$this->escapeHtml($this->getImageLabel()).'" />';
            echo $_helper->productAttribute($_product, $_img, 'image');
        ?>
    </p>
</div>
<?php endif; ?>
<?php if (count($this->getGalleryImages()) > 0): ?>
<?php 
    $limitmore = count($this->getGalleryImages());
?>
<div class="more-views">
    <ul class="<?php if(Mage::helper('themeframework/settings')->getMoreview_EnableSlider()):?>em-qs-moreviews-slider <?php if(Mage::helper('themeframework/settings')->getMoreview_SliderPaginationNumbers()):?>owl-pagination-numbers<?php endif;?><?php else:?>em-moreviews-noslider<?php endif;?>">
    <?php foreach ($this->getGalleryImages() as $_image): ?>
        <li class="item" >
            <?php 
                $_img = $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile());
            ?>
			<?php if ($viewmode == 'cloudzoom'): ?>
                <?php
    				$_img_thumb = (string)$_img->resize(null);
                    if($_img->getOriginalWidth() >= 500){
                        $mv_w   =   500;
                    }    
                    else
                        $mv_w   =   $_img->getOriginalWidth();
                    $ratio = $mv_w / $_img->getOriginalWidth();
                    $mv_h = $ratio * $_img->getOriginalHeight();
    				$_img_thumb = (string)$_img->resize(Mage::helper('themeframework/settings')->getMoreview_Width(130), Mage::helper('themeframework/settings')->getMoreview_Height(130));
                    $_img_small = (string)$this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize($mv_w,$mv_h);
                    $_img_big = (string)$this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile());
                ?>
                <a data-magnify-zoom="<?php echo $_img_big ?>" class="magnify-zoom-gallery" href="javasript:void(0)">
    				<img src="<?php echo $_img_thumb ?>" alt="<?php echo $this->escapeHtml($_image->getLabel()) ?>" />
                </a>			
            <?php else: ?>
    			<?php $_img_thumb = (string)$_img->resize(Mage::helper('themeframework/settings')->getMoreview_Width(130), Mage::helper('themeframework/settings')->getMoreview_Height(130)); ?>
                <a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'width=300,height=300,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;" title="<?php echo $this->escapeHtml($_image->getLabel()) ?>">
    				<img src="<?php echo $_img_thumb; ?>" alt="<?php echo $this->escapeHtml($_image->getLabel()) ?>" /></a>
            <?php endif ?>
        </li>
    <?php endforeach; ?>
    </ul>
</div>
<script type="text/javascript">
//<![CDATA[
    <?php if ($viewmode == 'cloudzoom'): ?>
        jQuery('.magnify-zoom-gallery').click(function (e) {
            e.preventDefault();
            var $_this = jQuery(this);
            var magnify_small = jQuery('#qs-magnify-small');
            var magnify_large = jQuery('#qs-magnify-large');
            var $_bgImg = 'url(' + $_this.data('magnify-zoom') + ')';
        	magnify_small.attr('src', $_this.data('magnify-zoom'));            
            magnify_large.css({
                'background-image': $_bgImg
            });
        });
    <?php endif;?>
    <?php if(Mage::helper('themeframework/settings')->getMoreview_EnableSlider()):?>
    (function($) {
        var owl = $(".em-qs-moreviews-slider"); 
        function doSliderMoreview(){
            //var owl = $(".em-qs-moreviews-slider"); 
            if(owl.length){
                owl.owlCarousel({             
                    // Navigation
                    navigation : <?php echo Mage::helper('themeframework/settings')->getMoreview_SliderNavigation() ? 'true' : 'false'?>,
                    navigationText : ["<?php echo $this->__('Previous')?>", "<?php echo $this->__('Next')?>"],
                    pagination : <?php echo Mage::helper('themeframework/settings')->getMoreview_SliderPagination() ? 'true' : 'false'?>,
                    paginationNumbers: <?php echo Mage::helper('themeframework/settings')->getMoreview_SliderPaginationNumbers() ? 'true' : 'false'?>,                 
                    
                    <?php if(Mage::helper('themeframework/settings')->getGeneral_DisableResponsive(1)!=0):?>
                    // Responsive 
                    responsive: true,
                    items : <?php echo Mage::helper('themeframework/settings')->getMoreview_SliderItems() ? Mage::helper('themeframework/settings')->getMoreview_SliderItems() : 3 ?>, /*items above 1200px browser width*/
                    itemsDesktop : [1200,<?php echo Mage::helper('themeframework/settings')->getMoreview_SliderItemsDesktop() ? Mage::helper('themeframework/settings')->getMoreview_SliderItemsDesktop() : 3 ?>], /*//items between 1199px and 981px*/
                    itemsDesktopSmall : [992,<?php echo Mage::helper('themeframework/settings')->getMoreview_SliderItemsDesktopSmall() ? Mage::helper('themeframework/settings')->getMoreview_SliderItemsDesktopSmall() : 3 ?>],
                    itemsTablet: [768,<?php echo Mage::helper('themeframework/settings')->getMoreview_SliderItemsTablet() ? Mage::helper('themeframework/settings')->getMoreview_SliderItemsTablet() : 3 ?>],                    
                    itemsMobile : [480,<?php echo Mage::helper('themeframework/settings')->getMoreview_SliderItemsMobile() ? Mage::helper('themeframework/settings')->getMoreview_SliderItemsMobile() : 3 ?>],
                    <?php else:?>
                    responsive: false,
                    items : <?php echo Mage::helper('themeframework/settings')->getMoreview_SliderItems() ? Mage::helper('themeframework/settings')->getMoreview_SliderItems() : 3 ?>, /*items above 1200px browser width*/
                    <?php endif;?>
                    
                    // CSS Styles
                    baseClass : "owl-carousel",
                    theme : "owl-theme", transitionStyle : false,
                    addClassActive : true,
                });
            }
        }
        $(window).bind('qs_load', function() {
           doSliderMoreview();
        });        
    })(jQuery);
    <?php endif; ?>
//]]>
</script>
<?php endif; ?>
